<template>
<div class="tab-container">
  <div class="">
    <div class="paddingb textl paddingr" style="font-size:14px">
      <span>关键字</span>
      <el-input v-model="input.queryStr" placeholder="可根据名称/单位/领域/级别/链接查询" style="width:20%;"></el-input>

      <el-button style="margin-left:20px" @click="loadPageList" type="primary">查询</el-button>
      <el-button style="" @click="handleEdit('','add')" type="primary">添加</el-button>
      <el-button style="" @click="handleDelete" type="primary">删除</el-button>
      <el-button style="" @click="exportData" type="primary">批量导出</el-button>
      <el-button style="" @click="upload" type="primary">批量导入</el-button>
    </div>
  </div>


  <el-dialog
    title="上传"
    :visible.sync="showUpload"
    width="30%"
    :before-close="handleClose">
    <el-upload class="upload-demo" accept=".xlsx,.xls" drag :headers="headers" :action="uploadUrl"
               :before-upload="beforeUploadImg"
               :file-list="fileList"
               :on-error="uploadError"
               :on-success="uploadSuccess" >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传xlsx/xls文件，且不超过500kb</div>
    </el-upload>
  </span>
  </el-dialog>




  <el-table v-loading="loading" ref="multipleTable" @selection-change="handleSelectionChange" class="tableH" :data="list" border style="margin-top:20px;width:100%;font-size:12px;">
    <el-table-column type="selection" width="30px;">
    </el-table-column>
    <el-table-column align="center" label="名称">
      <template slot-scope="scope">
                    <div @click="handleEdit(scope.row,'show')" class="clickText" >{{ scope.row.spName }}</div>
                </template>
    </el-table-column>
    <el-table-column align="center" label="承担单位">
      <template slot-scope="scope">
                    <span >
                        {{ scope.row.spCompany}}</span>
                </template>
    </el-table-column>
    <el-table-column align="center" label="领域" width="90px;">
      <template slot-scope="scope">
                    <span>
                        {{ scope.row.spDomain}}</span>
                </template>
    </el-table-column>
    <el-table-column align="center" label="级别" width="80px;">
      <template slot-scope="scope">
                    <span>
                        {{ scope.row.spLevel}}</span>
                </template>
    </el-table-column>
    <el-table-column align="center" label="链接">
      <template slot-scope="scope">
                    <span>
                        {{ scope.row.spLink}}</span>
                </template>
    </el-table-column>





    <el-table-column align="center" label="操作" width="150px;">
      <template slot-scope="scope">
                    <div style="">
                        <div v-show="scope.row.checkStatus == 0" @click="handlesh(scope.row)" class="clickText" style="float:left;padding-left:5px">
                          审核
                        </div>
                      <div  v-show="scope.row.checkStatus != 0 && scope.row.checkStatus != 1" @click="handleEdit(scope.row,'edit')" class="clickText" style="float:left;padding-left:5px">
                        编辑
                      </div>

                  <span v-show="scope.row.checkStatus == 1 && scope.row.stickSort > 0">  <div @click="handlexy(scope.row,1)" class="clickText" style="float:left;padding-left:5px">
                                            置顶
                            </div></span>
                    <span v-show="scope.row.checkStatus == 1 && scope.row.stickSort == 0">  <div @click="handlexy(scope.row,0)" class="clickText" style="float:left;padding-left:5px">
                                                      取消置顶
                    </div></span>
                  <span v-show="scope.row.readable == 1 && scope.row.checkStatus == 1">  <div @click="handlexj(scope.row)" class="clickText" style="float:left;padding-left:5px">
                                            下架
                            </div></span>
                  <span v-show="scope.row.readable == 0 && scope.row.checkStatus == 1">  <div @click="handlesj(scope.row)" class="clickText" style="float:left;padding-left:5px">
                                            上架
                  </div></span>
                  <span >  <div @click="delObj(scope.row)" class="clickText" style="float:left;padding-left:5px;color:red">
                                            删除
                  </div></span>

                    </div>
                </template>
    </el-table-column>

  </el-table>

  <div class="pagination-container pageH" style="padding-top:20px">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>



  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%" top='5%'>

    <el-form class="" label-width="30%" style="text-align:left">
      <el-row :gutter="24">
        <el-col :span="24">
          <table class="showDetailTable" cellpadding=0 cellspacing=0 border="0" style="width:100%;border: 1px solid#ccc;text-align: center;">
            <tr style="border-bottom: 1px solid#ccc;">
              <td style="width:100px;padding:10px">名称</td>
              <td>
                {{majorPlatform.spName}}
              </td>
              <td style="width:100px;padding:10px">承担单位</td>
              <td>
                {{majorPlatform.spCompany}}
              </td>
            </tr>
            <tr style="border-bottom: 1px solid#ccc;">
              <td style="width:100px;padding:10px">领域</td>
              <td>
                {{majorPlatform.spDomain}}
              </td>
              <td style="width:100px;padding:10px">级别</td>
              <td>
                {{majorPlatform.spLevel}}
              </td>
            </tr>
            <tr style="border-bottom: 1px solid#ccc;">
              <td style="width:100px;padding:10px">链接</td>
              <td>
                {{majorPlatform.spLink}}
              </td>
            </tr>


          </table>

          <div v-show="activeTabPosition == '报名信息'">
            <span>报名人姓名</span>
            <el-input v-model="inputE.objName" placeholder="" style="width:100px;"></el-input>
            <span style="margin-left: 15px;">活动日期</span>
            <el-date-picker v-model="inputE.enrollStart" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:140px">
            </el-date-picker>
            <el-date-picker v-model="inputE.enrollEnd" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:140px">
            </el-date-picker>
            <el-button style="margin-left:20px" @click="loadEnrolls" type="primary">查询</el-button>
            <el-table class="tableH" :data="listE" border style="margin-top:20px;width:100%;font-size:12px;">

              <el-table-column align="center" label="姓名">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.name}}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="工作单位">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.workplace}}</span>
                </template>
              </el-table-column>

              <el-table-column align="center" label="职务">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.job}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="联系电话">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.phone}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="联系邮箱">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.email}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="联系地址">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.addr}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="备注">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.publishUserId}}</span>
                </template>
              </el-table-column>



              <el-table-column align="center" label="报名时间">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.enrollDate | formatTime}}</span>
                </template>
              </el-table-column>

            </el-table>
          </div>


          <div v-show="activeTabPosition == '报名信息'" class="pagination-container pageH" style="padding-top:20px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,30, 50]" :page-size="listQuery2.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
          </div>



        </el-col>

      </el-row>
    </el-form>
    <div v-show="!show" style="padding-left: 35%;margin: 40px 0  0  0;height: 100px;">
      <div class="" style="padding:15px" v-show="!$route.params.objData">
        <el-radio-group v-model="checkStatus">
          <el-radio :label="-1">草稿</el-radio>
          <el-radio :label="0">提交待审</el-radio>
          <el-radio :label="1">直接审核</el-radio>
        </el-radio-group>
      </div>
      <div class="">
        <el-button type="primary" style="width: 120px;" @click="saveObj(checkStatus)">保存</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </div>
    <div v-show="show" style="height: 100px;">

    </div>
  </el-dialog>



  <el-dialog title="置顶" :visible.sync="dialogShowLevel" width="30%" top='5%'>

    <el-form class="" label-width="30%" style="text-align:left">
      <el-row :gutter="12">
        <el-col :span="20">

          <el-form-item label="置顶排序">
            <el-input v-model="xyset.order" placeholder=""></el-input>
          </el-form-item>

        </el-col>

      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="" @click="saveFile(xyset)">保存</el-button>
        <el-button type="primary" @click="dialogShowLevel = false">关闭</el-button>
      </span>
  </el-dialog>


  <el-dialog title="审核" :visible.sync="dialogShowSH" width="30%" top='5%'>

    <el-form class="" label-width="30%" style="text-align:left">
      <el-row :gutter="24">
        <el-col :span="24">

          <el-form-item label="审核">
            <el-select v-model="rej.way" style="height:30px" placeholder="请选择">

              <el-option label="通过" key="1" value="1">
              </el-option>
              <el-option label="驳回" key="2" value="2">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item v-show="rej.way == '2'" label="驳回原因">
            <el-input v-model="rej.info" placeholder=""></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

    <span slot="footer" class="dialog-footer" style="">
        <el-button type="primary" style="" @click="saveReject(rej)">保存</el-button>
        <el-button type="primary" @click="dialogShowSH = false">关闭</el-button>
      </span>
  </el-dialog>

</div>
</template>

<script>
import {
  getShareplatform,
  addShareplatform,
  updShareplatform,
  getShareplatformC,
  delShareplatformC,
  delShareplatformList,
  importPlatform
} from '@/api/majorPlatform'

import table2excel from 'table2excel'
import printArea from 'printArea'
export default {
  components: {},
  data() {
    return {
      defaultMsg: '<span style="orphans: 2; widows: 2; font-size: 22px; font-family: KaiTi_GB2312; background-color: rgb(229, 51, 51);"><strong>测试内容</strong></span>',
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 350
      },
      activeTabPosition: '活动信息',
      ue1: "ue1", // 不同编辑器必须不同的id
      rej: {
        way: '1',
        info: '',
        id: ''
      },
      xyset: {
        order: '',
        id: ''
      },
      title: "",
      input: {
        queryStr: '',
      },
      inputE: {
        objName: '',
        enrollStart: '',
        enrollEnd: '',
      },
      listE: [],
      bank: '1',
      list: [],
      timeType: '1',
      dialogStatus: '',
      dialogFormVisible: false,
      dialogShowRole: false,
      dialogShowDep: false,
      dialogShowSH: false,
      dialogShowLevel: false,
      dialogadd: false,
      dialogsave: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
      },
      listQuery2: {
        page: 1,
        limit: 10,
      },
      treeData: [],
      loading: true,
      userType: '',
      multipleSelection: [],
      detailData: '',
      tfcheckStatus: '',
      checkStatus: -1,
      majorPlatform: {
        spName: '',
        spCompany: '',
        spDomain: '',
        spLevel: '',
        spLink: '',
      },
      pldcUrl: "",
      showUpload: false,
      uploadUrl:'',
      headers: {
        token: window.sessionStorage.getItem('token')
      },
      fileList:[]
    }
  },
  created() {
  },
  async mounted() {

    this.loadPageList()
    this.userType = window.sessionStorage.getItem('userType')

  },
  computed: {},
  methods: {
    exportData(){
      this.pldcUrl = this.docUrl + '/shareplatform/exportPlatform?queryStr=' + this.input.queryStr + '&token=' + window.sessionStorage.getItem('token')
      window.open(this.pldcUrl,"_blank");
    },
    upload(){
      this.showUpload = true;
      this.uploadUrl = this.docUrl + "/shareplatform/importPlatform";
      this.fileList = [];
    },
    beforeUploadImg(file) {
      // const isLt10M = file.size / 1024 / 1024 < 10;
      if (file.name.indexOf('xlsx') <= -1 && file.name.indexOf('xls') <= -1) {
        // if (['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', ].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的格式');
        return false;
      }
      // if (!isLt10M) {
      //   this.$message.error('上传文件大小不能超过10MB哦!');
      //   return false;
      // }
    },
    async uploadSectionFile2(param) {
      Loading.service({
        fullscreen: true,
        background: 'rgba(0, 0, 0, 0.2)'
      });
      var div = document.getElementsByClassName("el-loading-mask is-fullscreen")
      div[0].style.display = 'block'
      this.cardSide = []
      var fileObj = param.file;
      // 接收上传文件的后台地址
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      // 其他参数
      // form.append("xxx", xxx);
      debugger;
      let {
        data,
        success,
        message
      } = await importPlatform(form)
      // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
      //   // loadingInstance.close();
      // });
      var div = document.getElementsByClassName("el-loading-mask is-fullscreen")
      div[0].style.display = 'none'

      if (success) {
        this.$message({
          type: 'success',
          message: message
        });
      } else {
        let arr = []
        arr = message.split(';')
        this.list = arr
        loadingInstance.close();
        // this.$message({
        //   type: 'warning',
        //   message: message
        // });
      }
    },
    async loadPageList() {
      if (this.input) {
        this.input.pageNum = this.listQuery.page
        this.input.pageSize = this.listQuery.limit
      }
      let {
        data,
        success
      } = await getShareplatform(this.input)
      if (success) {
        this.loading = false
        this.list = data.list
        this.total = data.total
      }
    },
    async saveFile(objdata) {
      if (objdata.order == '') {
        this.$message({
          message: '请输入置顶排序！',
          type: 'success'
        });
        return
      }
      let {
        data,
        success
      } = await topExchanges(objdata)
      this.$message({
        message: '设置成功',
        type: 'success'
      });
      this.loadPageList()
    },

    async saveReject(rej) {
      if (rej.way == '1') {
        let arr = []
        arr.push(rej.id)
        let {
          data,
          success
        } = await checkExchanges(arr)
        if (success) {
          this.$message({
            message: '审核成功',
            type: 'success'
          });
          this.loadPageList()
        }
      } else {
        if (rej.info == "") {
          this.$message({
            message: '请输入驳回原因！',
            type: 'success'
          });
          return
        }
        let {
          data,
          success
        } = await rejectExchanges(rej)
        if (success) {
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          this.loadPageList()
        }
      }
      this.dialogShowSH = false

    },
    handleSelectionChange(val) {
      let arr = []
      for (let i in val) {
        arr.push(val[i].id)
      }
      this.multipleSelection = arr;
    },
    async plsh() {
      let {
        data,
        success
      } = await checkExchanges(this.multipleSelection)
      if (success) {
        this.$message({
          type: 'success',
          message: '审核成功!'
        });
        this.loadPageList()
      }


    },
    async plsj() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'success',
          message: '请勾选上架内容!'
        });
      }
      let {
        data,
        success
      } = await plonExchanges(this.multipleSelection, '1')
      if (success) {
        this.$message({
          type: 'success',
          message: '上架成功!'
        });
        this.loadPageList()
      }
    },
    async plxj() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'success',
          message: '请勾选下架内容!'
        });
      }
      let {
        data,
        success
      } = await offExchanges(this.multipleSelection)
      if (success) {
        this.$message({
          type: 'success',
          message: '下架成功!'
        });
        this.loadPageList()
      }
    },
    pldc() {
      this.$message({
        type: 'success',
        message: '导出成功!'
      });
    },
    async handlexy(item, num) {
      if (num == 0) {
        this.xyset.id = item.id
        this.xyset.order = '9999'
        let {
          data,
          success
        } = await topExchanges(this.xyset)
        this.$message({
          message: '取消置顶',
          type: 'success'
        });
        this.loadPageList()
      } else {
        this.xyset.id = item.id
        this.xyset.order = '0'
        let {
          data,
          success
        } = await topExchanges(this.xyset)
        this.$message({
          message: '置顶成功',
          type: 'success'
        });
        this.loadPageList()
      }
    },
    handlesh(data) {
      this.dialogShowSH = true
      this.rej.id = data.id
    },
    async handlexj(params) {
      let obj = []
      obj.push(params.id)
      let {
        data,
        success
      } = await offExchanges(obj)
      if (success) {
        this.$message({
          message: '下架成功',
          type: 'success'
        });
        this.loadPageList()
      }
    },
    async handlesj(params) {
      let arr = []
      arr.push(params.id)
      let {
        data,
        success
      } = await plonExchanges(arr)
      if (success) {
        this.$message({
          message: '上架成功',
          type: 'success'
        });
        this.loadPageList()
      }
    },
    showDetail() {
      this.dialogShowDep = true
    },
    handlePrint() {
      $("#tablePrint").printArea();
    },
    handleDownload() { //导出
      $("#tableExcel").table2excel({
        exclude: ".noExl", //过滤位置的 css 类名
        filename: new Date().getTime() + ".xls", //文件名称
        name: "Excel Document Name.xlsx",
        exclude_img: true,
        exclude_links: true,
        exclude_inputs: true
      })
    },

    handleSizeChange(val) {
      if (!isNaN(val)) {
        this.listQuery.limit = val
      }
      this.loadPageList()
    },
    handleCurrentChange(val) {
      if (!isNaN(val)) {
        this.listQuery.page = val
      }
      this.loadPageList()
    },


    async handleEdit(item, type) {
      if (type === 'edit') {
        this.title = '编辑活动'
        this.$router.push({
          name: 'majorPlatformEdit',
          params: {
            itemId: item.id,
            checkStatus: this.tfcheckStatus
          }
        })
      } else if (type === 'add') {
        this.title = '添加活动'
        this.$router.push({
          name: 'majorPlatformEdit',
          // params: {
          //   objData: item
          // }
        })
      } else if (type === 'show') {
        this.dialogFormVisible = true
        let {
          data,
          success
        } = await getShareplatformC(item.id)
        this.majorPlatform = data
        this.show = true
        this.title = '查看详情'
        this.loadEnrolls()

      }
    },
    async loadEnrolls() {
      if (this.inputE) {
        this.inputE.page = this.listQuery2.page
        this.inputE.limit = this.listQuery2.limit
      }
      let {
        data,
        success
      } = await getEnrolls(this.inputE)
      if (success) {
        this.loading = false
        this.listE = data.list
        this.total = data.total
      }
    },

    handleDelete() {
      if(this.multipleSelection.length <= 0){
        this.$message({
          message: '请选择数据',
          type: 'warning'
        });
        return;
      }
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let del = await delShareplatformList(this.multipleSelection);
        this.loadPageList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
    }).catch(() => {
        this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
    },
    delObj(item) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let del = await delShareplatformC(item.id)
        this.list.splice(this.list.indexOf(item), 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        // this.splice(data.id, 1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    async saveObj(checkStatus) {
      // if (!this.validata.validausr(obj)) return
      let arr = {}
      arr = this.active
      arr.checkStatus = checkStatus
      debugger
      let {
        data,
        success
      } = await postExchanges(arr)

      if (success) {
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        this.dialogFormVisible = false
        this.loadPageList()
      } else {
        this.$message({
          message: data.message,
          type: 'success'
        });
      }
    },
    /**
     * 上传失败
     * @param err
     * @param file
     * @param fileList
     */
    uploadError (err, file, fileList) {
      this.$notify.error({
        title: '上传错误',
        message: '请核对文件后联系管理员'
      });
    },
    /**
     * 上传成功
     * @param response
     * @param file
     * @param fileList
     */
    uploadSuccess (res, file, fileList) {
      this.$notify({
        title: '上传成功',
        message: '已经成功上传',
        type: 'success'
      });
    }
  }
}
</script>

<style lang="scss">
@import '../../styles/index.scss'; // 全局自定义的css样式
</style>
